<template>
  <div class="my-function">
    <div class="title">
      <i class="el-icon-back c-pointer back-icon" @click="goBack()" />
      <h3 class="text">函数 {{ functionName }} 详情</h3>
    </div>

    <el-tabs v-model="active" class="tabs h-max">
      <el-tab-pane class="h-max" label="编辑云函数" name="first">
        <main-tab :time-out="$route.params.timeOut" :memory-size="$route.params.memorySize" />
      </el-tab-pane>
      <el-tab-pane class="h-max" label="测试函数" name="second">
        <testing-tab />
      </el-tab-pane>
      <el-tab-pane class="h-max" label="依赖管理" name="third">
        <dependency-tab />
      </el-tab-pane>
      <el-tab-pane class="h-max" label="函数描述" name="fourth">
        <config-tab />
      </el-tab-pane>
      <!-- 之后再加上 -->
      <!-- <el-tab-pane label="函数日志" name="fourth">
              <log-tab />
            </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import ConfigTab from './Tabs/ConfigTab.vue';
import MainTab from './Tabs/MainTab.vue';
import DependencyTab from './Tabs/DependencyTab.vue';
import TestingTab from './Tabs/TestingTab.vue';
import { mapActions, mapMutations, mapState } from 'vuex';

export default {
  components: {
    ConfigTab,
    MainTab,
    DependencyTab,
    TestingTab
  },
  data() {
    return {
      data: {},
      activeTabName: 'first',
      tabHeight: ''
    };
  },
  computed: {
    ...mapState('functions', ['serviceName', 'functionName', 'testcases', 'activeTab']),
    active: {
      get() {
        return this.activeTab;
      },
      set(value) {
        this.changeActiveTab(value);
      }
    }
  },
  created() {
    this.setTitle('配置函数');
    // this.checkTemplateFiles();
    this.getTemplateFiles();
  },
  methods: {
    ...mapActions('functions', ['getTemplateFiles', 'checkTemplateFiles']),
    ...mapMutations('functions', ['clearEditorFiles', 'setActiveTab', 'setTitle']),
    goBack() {
      this.clearEditorFiles();
      this.$router.go(-1);
    },
    changeActiveTab(index) {
      this.setActiveTab(index);
    }
  }
};
</script>

<style lang="scss" scoped>
.my-function {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 0 24px;

  .el-tabs__content {
    overflow: auto !important;

  }

  .title {
    display: flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    margin: 16px 0;

    .back-icon {
      display: inline-block;
      margin-right: 16px;
      font-size: 25px;
    }

    .text {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      vertical-align: middle;
      margin: 0;
      font-size: 28px;
      font-weight: 500;
      order: 0;
      -webkit-box-flex: 0;
      flex: 0 1 auto;
      align-self: auto;
      overflow-x: hidden;
    }
  }

  .tabs {
    height: 100%;
    width: 100%;
    flex: 1;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 3vh;
  }

}

</style>
<style>
.el-tabs__content {
    height: 100%;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
</style>

